<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>执行</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        #noData {
            text-align: center;
            height: 200px;
            line-height: 200px;
            color: #999;
        }

        #loadData {
            display: none;
            text-align: center;
            height: 200px;
            line-height: 200px;
            color: #666;
        }

        #loadData i {
            font-size: 28px;
        }
    </style>
</head>
<body style="padding: 20px 10px;">

<!-- 你的 HTML 代码 -->
<span class="layui-breadcrumb">
  <a href="/index.html">首页</a>
  <a href="/interface.html?dataSourceId=" id="configHref">配置</a>
  <a><cite>查询</cite></a>
</span>
<blockquote style="margin-top: 10px;" class="layui-elem-quote" id="sql"></blockquote>
<form class="layui-form" action="">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">参数</label>
        <div class="layui-input-block">
            <textarea id="param" name="param" lay-verify="param" placeholder="请输入查询参数，多个参数逗号隔开" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<hr>
<h3>查询结果：</h3>
<div id="noData">查询不到结果</div>
<div id="loadData">
    <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
</div>
<table id="demo" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
layui.use(['element', 'layer', 'form', 'table', 'jquery'], function(){
  var layer = layui.layer;
  var table = layui.table;
  var form = layui.form;
  var $ = layui.$;

   window.getInterfaceId = function(){
        var url = window.location.href;
        var interfaceId = parseInt(url.substring(url.lastIndexOf("=") + 1));
        return interfaceId;
   };

   window.loadData = function(param){
        $("#noData").hide();
        $("#loadData").show();
        var arr = param ? param.split(",") : [];
        $.ajax({
            type: "POST",
            url: "/interface-info/send",
            data: JSON.stringify({id:getInterfaceId(),param:arr}),
            contentType: 'application/json',
            dataType: "json",
            success: function (result) {
                $("#loadData").hide();
                if (result.code == 0 && result.data.length>0) {
                    var col = [];
                      for(var key in result.data[0]){
                        col.push({field: key, title: key});
                      }
                      var cols = [];
                      cols[0] = col;

                      //第一个实例
                      table.render({
                        elem: '#demo'

                        ,url: '' //数据接口
                        ,data: result.data
                        ,page: true //开启分页
                        ,cols: cols
                        ,toolbar: true
                        ,escape: true
                      });
                }else{
                    $("#noData").show();
                    $("#demo").next().remove();
                }
            }
        });
   };

    $.ajax({
        type: "POST",
        url: "/interface-info/findById",
        data: JSON.stringify({id:getInterfaceId()}),
        contentType: 'application/json',
        dataType: "json",
        success: function (result) {
            if (result.code == 0) {
                $("#sql").html(result.data.sql);
                $("#configHref").attr("href", $("#configHref").attr("href") + result.data.dataSourceId)
            }
        }
    });

    form.on('submit(formDemo)', function(data){
      loadData(data.field.param);
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    form.verify({
      param: function(value, item){ //value：表单的值、item：表单的DOM对象
        if(value == "" && $("#sql").text().indexOf("?") != -1){
          return '请输入查询参数';
        }
      }
    });

});
</script>
</body>
</html>